<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>simple-style-ui</title>
		<link rel="stylesheet" href="style/simple-style-ui.css" />
		<style>
			.limit-width {
				width: 100vh;
			}
		</style>
	</head>
	<body>
		<div class="ui-container">
			<!-- 按钮 -->
			<div class="limit-width">
				<si-text-show title-position="top">
					<span slot="title">普通按钮</span>
					<button class="small button">小型按钮</button>
					<button class="medium button">中等按钮</button>
					<button class="large button">大型按钮</button>

					<button class="medium plain-main-button">主要按钮</button>
					<button class="medium plain-success-button">提交按钮</button>
					<button class="medium plain-warning-button">警告按钮</button>
					<button class="medium plain-serious-button">删除按钮</button>
					<button class="medium plain-info-button">信息按钮</button>

					<button class="medium main-button">主要按钮</button>
					<button class="medium success-button">提交按钮</button>
					<button class="medium warning-button">警告按钮</button>
					<button class="medium serious-button">删除按钮</button>
					<button class="medium info-button">信息按钮</button>
				</si-text-show>
			</div>

			<!-- 文本按钮 -->
			<div class="limit-width">
				<si-text-show>
					<span slot="title">文本按钮</span>
					<button class="medium text-button">文本按钮</button>
					<button class="medium text-main-button">文本按钮</button>
					<button class="medium text-success-button">文本按钮</button>
					<button class="medium text-warning-button">警告按钮</button>
					<button class="medium text-serious-button">删除按钮</button>
					<button class="medium text-info-button">信息按钮</button>
				</si-text-show>
			</div>

			<!-- 半圆按钮 -->
			<div class="limit-width">
				<si-text-show>
					<span slot="title">半圆按钮</span>
					<button class="small plain-main-button semicircle">半圆按钮</button>
					<button class="medium plain-success-button semicircle">半圆按钮</button>
					<button class="large plain-warning-button semicircle">半圆按钮</button>
				</si-text-show>
			</div>

			<!-- 圆形图标按钮 自定义icon -->
			<div class="limit-width">
				<si-text-show>
					<span slot="title">圆形图标按钮</span>
					<button class="main-button round" icon="imgs/warning-icon.png"></button>
					<button class="medium main-button round">圆</button>
				</si-text-show>
			</div>

			<!-- 按钮组 -->
			<div class="limit-width">
				<si-text-show>
					<span slot="title">按钮组</span>
					<div class="buttons-group">
						<button class="medium main-button" icon="imgs/warning-icon.png">按钮组1</button>
						<button class="medium success-button">按钮组2</button>
						<button class="medium warning-button">按钮组3</button>
						<button class="medium serious-button" after-icon="imgs/warning-icon.png">按钮组4</button>
					</div>
				</si-text-show>
			</div>

			<div class="limit-width">
				<si-text-show>
					<span slot="title">文本框</span>
					<si-input si-model="input" placeholder="请输入手机号" border="false" disabled></si-input>

					<si-input si-model="input" placeholder="请输入手机号" verify="judge" size="small"
						style="margin-top: 10px;display: block;"></si-input>

					<si-input si-model="input" placeholder="请输入人民币" customize-verify="is" contain-border-color="false">
						<span slot="right" border="false">RMB</span>
					</si-input>

					<si-input si-model="input" placeholder="请输入商品名称" customize-verify="is" contain-border-color="false">
						<span slot="right" border="true">
							<button class="medium text-main-button" onclick="seach()">搜索</button>
						</span>
					</si-input>

					<si-input si-model="input" placeholder="请输入商品名称" style="width: 300px;" customize-verify="is"
						contain-border-color="true">
						<span slot="left" border="true">
							<si-select si-model="selectValue" si-html="true" onchange="select" for="selectList"
								value="id" label="name" placeholder="请选择" text="type" style="width: 120px;"
								border="false">
							</si-select>
						</span>
					</si-input>
					
					<si-input si-model="input" placeholder="请输入金额" type="number" format="formatAmount"></si-input>
					
					<si-input si-model="input" placeholder="请输入密码" type="password"></si-input>
				</si-text-show>
			</div>

			<!-- 下拉菜单 -->
			<div class="limit-width">
				<si-text-show>
					<span slot="title">下拉菜单</span>
					<si-select si-model="selectValue" si-html="true" onchange="select" placeholder="请选择">
						<si-option value="01">苹果<b style="margin-left: 10px;">123123123</b></si-option>
						<si-option value="02">香蕉<si-text position="right">右边</si-text></si-option>
						<si-option value="03">梨子</si-option>
					</si-select>
					<si-select si-html="true" onchange="select" for="selectList" value="id" label="name"
						placeholder="请选择" text="type">
					</si-select>
				</si-text-show>
			</div>

			<div class="limit-width">
				<si-text-show>
					<span slot="title">分割线</span>
					<si-hr style="solid"><si-text position="left">左边</si-text></si-hr>
					<si-hr style="dashed"><si-text position="right">右边</si-text></si-hr>
					<si-hr style="dashed"><si-text position="center">中间</si-text></si-hr>
				</si-text-show>
			</div>

			<div class="limit-width">
				<si-text-show>
					<span slot="title">单选按钮</span>
					<si-radio-group si-model="radio">
						<si-radio label="1">选项1</si-radio>
						<si-radio label="2">选项2</si-radio>
						<si-radio label="3">选项3</si-radio>
					</si-radio-group>
				</si-text-show>
			</div>
			<div class="limit-width">
				<si-text-show>
					<span slot="title">单选按钮</span>
					
				</si-text-show>
			</div>

			<!--分割线 solid普通直线 dashed虚线 -->
		</div>
		<script>
			var input = "";
			var selectValue = "";
			var radio = "3";

			var is = (value) => {
				console.log(input);
			}

			function seach() {
				console.log(input);
			}

			function formatAmount(value) {
			  // 格式化金额，例如：123456 -> 123,456
			  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			}

			var judge = [{
				"max": 25,
				"message": "最大可输入25个字符！"
			}, {
				"min": 0,
				"message": "最小可输入0个字符！"
			}, {
				"must": true,
				"message": "请输入手机号!"
			}, {
				"regular": /^1[3-9]\d{9}$/,
				"message": "请输入正确的手机号!"
			}]


			var select = (value) => {
				console.log(parseInt(value));
				console.log(selectValue);
			}
			var selectList = [{
					id: 10,
					name: '苹果<b style="margin-left: 10px;">梨子</b>',
					type: '水果'
				},
				{
					id: 20,
					name: '大蒜',
					type: '菜'
				},
				{
					id: 30,
					name: '醋',
					type: '调料'
				},
				{
					id: 40,
					name: '锤子',
					type: '工具'
				},
				{
					id: 50,
					name: '西瓜',
					type: '水果'
				},
			]
		</script>
		<script src="/simple-style-ui/js/simple-style-ui.js"></script>
	</body>
</html>